<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-09-29 15:11:00
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-10-24 14:58:37
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-09-29 15:11:00
-->
<template>
  <div class="flex">
    <a-card title="基本用法">
      <a-button type="primary" disabled @click="show">disabled</a-button>
    </a-card>
    <a-card title="异步关闭">
      <a-button type="primary" disabled @click="() => (visibles = true)"
        >disabled</a-button
      >
    </a-card>

    <a-card title="定制按钮文字">
      <a-button type="primary" disabled @click="() => (visibless = true)"
        >定制按钮</a-button
      >
      <a-modal
        v-model:visible="visibless"
        :hide-cancel="true"
        ok-text="Confirm"
        cancel-text="Exit"
      >
        <template #title> Title </template>
        <div>
          You can customize modal body text by the current situation. This modal
          will be closed immediately once you press the OK button.
        </div>
      </a-modal>
    </a-card>

    <a-modal v-model:visible="visible" title="消息提示">
      <view
        >You can customize modal body text by the current situation. This modal
        will be closed immediately once you press the OK button.</view
      >
    </a-modal>
    <a-modal
      v-model:visible="visibles"
      :on-before-ok="handleBeforeOk"
      title="异步关闭"
    >
      <view
        >You can customize modal body text by the current situation. This modal
        will be closed immediately once you press the OK button.</view
      >
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const visible = ref(false);
const visibles = ref(false);
const visibless = ref(false);

function show() {
  visible.value = !visible.value;
}

const handleBeforeOk = async () => {
  console.log("我开始调用了");
  await new Promise((resolve) => setTimeout(resolve, 3000));
};
</script>

<style lang="scss" scoped>
.flex {
  padding: 200rpx 20rpx;
}

:deep(.arco-card) {
  margin-bottom: 30rpx;
}

:deep(.arco-tag) {
  margin: 15rpx 10rpx;
}
</style>
